<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 1200px;
            height: 700px;
            display: flex;
            border: 2px solid #000;
            margin: 30px auto;
        }

        .list {
            width: 850px;
            height: 100%;
            background-color: aqua;
            margin-right: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .gouwuche {
            flex: 1;
            height: 100%;
            background-color: blueviolet;
        }

        .gouwuche img {
            width: 30%;
        }

        .small {
            width: 24%;
        }

        .small button {
            width: 136px;
            height: 36px;
            background-color: #fc0000;
            text-align: center;
            line-height: 36px;
        }

        .small img {
            width: 100%;
        }

        .word {
            margin-left: 26px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="list">
        </div>
        <div class="gouwuche">
            <h2>购物车</h2>
        </div>
</body>

</html>
<script>
    var goodlist = [
        { id: 1, name: '高级办公桌', price: 10000, adress: 'images/4.gif' },
        { id: 2, name: '高级按摩椅', price: 10000, adress: 'images/5.gif' },
        { id: 3, name: '高级电动按摩椅', price: 10000, adress: './images/6.gif' },
        { id: 4, name: '电动按摩椅', price: 10000, adress: 'images/7.gif' },
        { id: 5, name: '老板椅', price: 10000, adress: 'images/8.gif' },
        { id: 6, name: '办公桌', price: 10000, adress: 'images/9.gif' },
        { id: 7, name: '可升降办公椅', price: 10000, adress: 'images/6.gif' },
        { id: 8, name: '可升降办公桌', price: 10000, adress: 'images/11.gif' },
    ]
    var oo = { list: [] }
    function render() {
        var list = document.querySelector('.list')
        list.innerHTML = goodlist.map((item) => {
            return `<div class="small">
                <img src="${item.adress}">
                <p class="word">${item.name}</p>
                <p class="word">${item.price}</p>
                <button>加入购物车</button>
            </div>`
        }).join('')
        function renderGouwuche() {
            var gouwuche = document.querySelector('.gouwuche')
            gouwuche.innerHTML = oo.list.map((item) => {
                return `<div class="small">
                <img src="${item.adress}">
                <p class="word">${item.name}</p>
                <p class="word">${item.price}</p>
                <button>加入购物车</button>
            </div>`
            }).join('')
        }
    }
    render()
    // 给list添加点击事件
    var list = document.querySelector('.list')
    list.onclick = function (e) {
        if (e.target.tagName == 'BUTTON') {
            // 获取点击商品的下标
            var btns = [...document.querySelectorAll('button')]
            var index = btns.findIndex((item) => {
                return item == e.target
            })
            // 点击添加商品数据到购物车数据库
            oo.list.push(goodlist[index])
            // 重新渲染购物车列表
            renderGouwuche()
        }
    }
    var ooo = new Proxy(oo,{
        set:(a,b,c)=>{
            console.log('set');
            renderGouwuche()
        },
        get:(a,b,c)=>{ console.log('获取了oo对象',a,b,c);}
    })
</script>